<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{myAge + 1}}</h2>
    <button @click="updateAge">修改年龄</button>
  </div>
</template>

<script>
  export default {
    name: "Student",
    data() {
      console.log(this)
      return {
        msg: "我是一个尚硅谷的学生",
        myAge: this.age
      }
    },
    // props接收的属性值，优先于data中的同名属性值
    
    // props: ['name', 'age', 'sex']  // 简单声明接收 顺序无所谓
    // props: ['name', 'age', 'sex', 'phone']  // 不要瞎声明 如果没有传值，data中也会有值，值为undefined

    // 接收的同时对数据：进行类型限制
    /* props: {
      "name": String,
      "age": Number,
      "sex": String
    } */

    // 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
    props: {
      name: {
        type: String,   // name的类型是字符串
        require: true   // name是必要的
      },
      age: {
        type: Number,
        default: 99     // 默认值
      },
      sex: {
        type: String,
        require: true
      }
    },
    methods: {
      updateAge() {
        console.log(this);
        /* 
          Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 
          Instead, use a data or computed property based on the prop's value. 
          Prop being mutated: "age"

          避免直接改变prop，因为当父组件重新呈现时，该值将被覆盖。
          相反，使用基于道具值的数据或计算属性。
          道具被变异:“年龄”
        */
        this.myAge++
      }
    }
  };
</script>

<style>

</style>